<template>
  <div class="">
    <el-menu default-active="2"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             router="true"
             @close="handleClose">

      <el-menu-item index="/home">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/compliance-risk">
        <el-icon>
          <WarningFilled />
        </el-icon>
        <span>合规风险</span>
      </el-menu-item>
      <el-menu-item index="/report-risks">
        <el-icon><WarnTriangleFilled /></el-icon>
        <span>报备风险</span>
      </el-menu-item>
      <el-menu-item index="/quality-record">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>质检记录</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><TrendCharts /></el-icon>
          <span>数据趋势</span>
        </template>
        <el-menu-item index="/data-trend1">数据趋势1</el-menu-item>
        <el-menu-item index="/data-trend1">数据趋势2</el-menu-item>
        <!-- <el-menu-item-group>
          <el-menu-item index="1-1">笔记数据</el-menu-item>
          <el-menu-item index="1-2">粉丝数据</el-menu-item>
        </el-menu-item-group> -->
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>质检配置</span>
        </template>
        <el-menu-item index="/quality-setting1">质检配置1</el-menu-item>
        <el-menu-item index="/quality-setting2">质检配置2</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>运营管理</span>
        </template>
        <el-menu-item index="/operation-manage1">运营管理1</el-menu-item>
        <el-menu-item index="/operation-manage2">运营管理2</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/system-manage1">系统管理1</el-menu-item>
        <el-menu-item index="/system-manage2">系统管理2</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
// 1. 激活态样式：覆盖激活的菜单选项和子菜单标题
::v-deep(.el-menu-item.is-active) {
  color: $primary-buttom-active-colder;
  background-color: rgb(242, 247, 255);
  border-radius: 8px;
  font-size: 13px; // 激活态选项字体（小字体）
}
// 子菜单标题的激活态（正确选择器）
::v-deep(.el-sub-menu__title.is-active) {
  color: $primary-buttom-active-colder;
  background-color: rgb(242, 247, 255);
  border-radius: 8px;
  font-size: 13px; // 激活态子菜单标题字体
}

// 2. 普通菜单选项（未激活）：统一缩小字体
::v-deep(.el-menu-item) {
  margin: 0 10px;
  height: 44px;
  line-height: 44px; // 行高=高度，保证文字垂直居中
  font-size: 13px; // 核心：普通选项字体缩小到13px
}

// 3. 子菜单标题（如“数据趋势”）：缩小字体
::v-deep(.el-sub-menu) {
  margin: 0 10px;
}
::v-deep(.el-sub-menu__title) {
  height: 44px;
  line-height: 44px;
  font-size: 13px; // 核心：子菜单标题字体缩小到13px
}

// 4. 子菜单选项（如“数据趋势1”）：缩小字体（比父标题小1px，更有层级）
::v-deep(.el-sub-menu .el-menu .el-menu-item) {
  font-size: 10px; // 子选项字体更小
  height: 40px; // 微调高度，适配小字体
  line-height: 40px;
}

// 5. 保留 hover 样式和边框样式
::v-deep(.el-menu-item):hover {
  color: $primary-buttom-active-colder;
  background-color: transparent;
}
::v-deep(.el-sub-menu__title):hover {
  color: $primary-buttom-active-colder;
  background-color: transparent;
}
::v-deep(.el-menu) {
  border-right: none;
  font-size: 13px; // 兜底：给菜单容器设默认字体，防止遗漏
}
</style>
